<template>
  <AppHeader title="笔试" :banAnimate="true">
    <template #left>
      <img
        @click="onClickLeft"
        src="@/assets/images/icon-back-black.png"
        width="9"
        height="18"
      />
    </template>
    <template #right>
      <img
        @click="onClickRight"
        src="@/assets/images/icon-search.png"
        width="18"
        height="18"
      />
    </template>
  </AppHeader>
  <div class="writtenTest-container">
    <van-tabs
      v-model:active="active"
      background="#f5f5f5"
      color="#0CB76C"
      title-active-color="#0CB76C"
      @click-tab="onClickTab"
    >
      <van-tab :title="item.gradeName" v-for="(item, idx) in grades">
        <Mescroll
          v-bind="mescrollConfig"
          class="research-dev-demand-pool__scroll-container"
          :style="{
            height: 'calc(100vh - 44px)',
            position: 'fixed',
            top: '95px',
            bottom: 0,
          }"
          @init="mescrollInited"
          v-show="testList.length"
        >
          <div class="product-box">
            <div
              class="product-item"
              v-for="i in testList"
              @click="handleClickItem(i)"
            >
              <img :src="i.cover_full" />
              <div class="product-txt">
                <span class="ellipsis-multiline2">{{ i.productName }}</span>
              </div>
            </div>
          </div>
        </Mescroll>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import AppHeader from "@/components/AppHeader.vue";
import { useRouter } from "vue-router";
import { ref, onMounted, watch,reactive ,toRefs ,nextTick} from "vue";
import { getGrade } from "@/api/listening";
import { request } from "@/api/request.js";
import { writingList } from "@/api/writtenTest";
import Mescroll from "mescroll.js/mescroll.vue";
const router = useRouter();
const mescroll = ref(null);
const state = reactive({
  loading: {
    page: false,
  },
  testList: [],
  mescrollInstance: null,
  mescrollConfig: {
    down: {
      use: true,
    },
    up: {
      auto: true,
      isBounce: false,
      noMoreSize: 1,
      htmlNodata: '<p class="upwarp-nodata">-- 无更多数据 --</p>',
      callback: (page) => {
        fetchListData(page);
      },
    },
  },
  curClickItem: {},
  showEnterPopup: false,
});
const active = ref(0);
const list = ref([]);
const grades = ref([]);
const onClickRight = () => {
  router.push({
    path: "/writtenTest/search",
  });
};
const onClickLeft = () => {
  var u = navigator.userAgent;
  var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
  var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  if (isAndroid) {
    window.android.goBack();
  } else if (isiOS) {
    window.webkit.messageHandlers.back.postMessage("")
  }
};
const handleClickItem = (item) => {
  router.push({
    path: "/writtenTest/details",
    query: { id: item.productId },
  });
};

const onClickTab = async (e) => {
  state.testList = []
  fetchListData({num:1,size:10})
};

const getGrades = async () => {
  const { data } = await getGrade();
  grades.value = [...[{grade:'',gradeName: "全部",period: "1"}],...data.data];
};

onMounted(async () => {
  state.loading.page = true;
  await getGrades();
});
const mescrollInited = (mescroll) => {
  state.mescrollInstance = mescroll;
};
const fetchListData = ({ num, size = 10 }) => {
  writingList( { page: num, pageSize: size , grade: grades.value[active.value].grade}).then((res) => {
    const { code, data } = res;
    console.log(res)
    if (+code === 1 && data) {
      const isNestPage = data.length < size;
      if (num === 1) {
        state.testList = data;
      } else {
        state.testList = state.testList.concat(data);
      }
      state.testList = state.testList.map((item) => ({
        ...item,
        showMoreInfo: false,
      }));
      nextTick(() => {
        state.mescrollInstance.endSuccess(state.testList.length, !isNestPage);
      });
    } else {
      throw res;
    }
  }).finally(() => {
    state.loading.page = false;
  });
};
const { loading, testList, mescrollConfig, showEnterPopup } = toRefs(state);
</script>

<style scoped lang="scss">
.writtenTest-container {
  background-color: rgb(245, 245, 245);
  height: calc(100vh - 46px);
  width: 100%;
  padding-top: 46px;

  .product-box {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(111px, 1fr));
    justify-items: center;
    padding-top: 10px;
    overflow-y: auto;
    max-height: calc(100vh - 105px);
    min-height: 300px;
    .product-item {
      width: 111px;
      min-height: 192px;
      display: flex;
      flex-direction: column;
      font-size: 12px;
      margin-bottom: 6px;
      overflow: hidden;
      .product-txt {
        padding: 10px 5px;
        background-color: #fff;
        min-height: 50px;
        border-radius: 0 0 16px 16px;
      }
      img {
        height: 132px;
        border-radius: 15px 15px 0 0;
      }
    }
  }
}
</style>
